<template>
    <view class="edit-profile">
        <view class="form-item">
            <text>头像</text>
            <!-- 给图片添加类名 avatar-image -->
            <image :src="avatar" mode="aspectFill" @click="chooseAvatar" class="avatar-image"></image>
        </view>
        <view class="form-item">
            <text>昵称</text>
            <input v-model="nickname" placeholder="请输入昵称"></input>
        </view>
        <view class="form-item">
            <text>性别</text>
            <!-- 修正 :range 前的空格 -->
            <picker v-model="gender" :range="['男', '女']">
                <view>{{ gender }}</view>
            </picker>
        </view>
        <view class="form-item">
            <text>学号</text>
            <input v-model="studentId" placeholder="请输入学号"></input>
        </view>
        <button @click="saveProfile">保存</button>
    </view>
</template>

<script>
export default {
    data() {
        return {
            avatar: '',
            nickname: '',
            gender: '男',
            studentId: ''
        };
    },
    methods: {
        chooseAvatar() {
            uni.chooseImage({
                count: 1,
                success: (res) => {
                    this.avatar = res.tempFilePaths[0];
                }
            });
        },
        saveProfile() {
            // 准备要发送的数据
            const data = {
                avatar: this.avatar,
                nickname: this.nickname,
                gender: this.gender,
                studentId: this.studentId
            };

            uni.request({
                url: 'http://your-backend-api-url/updateProfile', // 后端接口地址
                method: 'POST',
                data: data,
                success: (res) => {
                    if (res.statusCode === 200) {
                        uni.showToast({
                            title: '保存成功',
                            icon: 'success'
                        });
                        uni.navigateBack();
                    } else {
                        uni.showToast({
                            title: '保存失败',
                            icon: 'none'
                        });
                    }
                },
                fail: (err) => {
                    console.error('请求失败:', err);
                    uni.showToast({
                        title: '请求失败',
                        icon: 'none'
                    });
                }
            });
        }
    }
};
</script>

<style lang="scss">
    .edit-profile {
        padding: 20px;
    }
    .form-item {
        margin-bottom: 20px;
        display: flex;
        align-items: center;
    }
    text {
        width: 100px;
    }
    // 新增头像图片样式
    .avatar-image {
        width: 100px;
        height: 100px;
        margin-left: 20px;
        border-radius: 50%; // 使元素呈圆形
        border: 2px solid #ccc; // 添加灰色边框，宽度为 2px
        overflow: hidden; // 隐藏超出圆形范围的内容
    }
    input {
        margin-left: 20px;
        border: 1px solid #ccc;
        padding: 10px;
		width:200px;
		height:40px;
		box-sizing:border-box;
    }
    picker {
        margin-left: 20px;
    }
    button {
        margin-top: 20px;
    }
</style>